<template>
	<view class="qj-adup">
		<u-form :model="fm.ps" :ref="fm.fname">
			<view class="my-fm">
				<view class="f-item">
					<view class="i-row">
						<view class="r-title">
							<label class="r-l-icon" :style="{'background': '#f00'}"></label>
							请假类型
						</view>
						<view class="r-con">
							<MySelect :title="'请假类型'" :name="'mainType'" :list="mainTypeList" :defval="fm.ps.mainType"
								@seledItem="mySeledMd"></MySelect>
						</view>
					</view>

					<!-- <view class="i-row">
						<view class="r-title">
							<label class="r-l-icon" :style="{'background': '#fff'}"></label>
							请假子类型
						</view>
						<view class="r-con">
							<MySelect 
								:title="'请假子类型'"
								:name="'childType'" 
								:list="childTypeList" 
								:defval="fm.ps.childType"
								@seledItem="mySeledMd"
							></MySelect>
						</view>
					</view> -->
				</view>

				<view class="f-item">
					<view class="i-row">
						<view class="r-title">
							<label class="r-l-icon" :style="{'background': '#ff6300'}"></label>
							请假人姓名
						</view>
						<view class="r-con">
							<u-input v-model="fm.ps.name" :type="'text'" :input-align="'right'" :clearable="false"
								:custom-style="{'color': '#00C3CE'}" :placeholder="'请输入请假人姓名'" />
						</view>
					</view>
				</view>

				<view class="f-item">
					<view class="i-row">
						<view class="r-title">
							<label class="r-l-icon" :style="{'background': '#00c3ce'}"></label>
							开始时间
						</view>
						<view class="r-con">
							<MyDateTime :datePlaceholder='"开始日期"' :timePlaceholder='"时间"' :name="'stime'"
								:dateTime="fm.ps.stime" @myClick="setDateTime"></MyDateTime>
						</view>
					</view>

					<view class="i-row">
						<view class="r-title">
							<label class="r-l-icon" :style="{'background': '#ffffff'}"></label>
							结束时间
						</view>
						<view class="r-con">
							<MyDateTime :datePlaceholder='"结束日期"' :timePlaceholder='"时间"' :name="'etime'"
								:dateTime="fm.ps.etime" @myClick="setDateTime"></MyDateTime>
						</view>
					</view>
				</view>

				<view class="f-item">
					<view class="i-row-textarea">
						<view class="r-title">
							<label class="r-l-icon" :style="{'background': '#06c'}"></label>
							请假事由
						</view>
						<view class="r-con">
							<u-input v-model="fm.ps.reason" :type="'textarea'" :custom-style="{'color': '#00C3CE'}"
								:clearable="false" :auto-height="true" :height="150" :maxlength="1000"
								:placeholder="'请填写您的请假事由，最多输入1000个字'" />
						</view>
					</view>
				</view>
			</view>

			<view class="fm-btns">
				<u-button size="medium" shape="circle" hover-class="none" :custom-style="fm.sb.okBtnSty"
					:loading="fm.sb.load" @click="qjAdupSubmit">
					<u-icon v-if="!fm.sb.load" name="edit-pen-fill" color="#fff"
						:custom-style="{'margin-right': '10rpx'}"></u-icon>
					{{fm.sb.text}}
				</u-button>
			</view>
		</u-form>

		<u-toast ref="qtoast" />
	</view>
</template>

<script>
	import MySelect from '@/components/my-select/my-select.vue';
	import MyDateTime from '@/components/my-date-time/my-date-time.vue';

	export default {
		components: {
			MySelect,
			MyDateTime
		},
		data() {
			return {
				// 订单详情
				obj: null,
				// 主类型列表
				mainTypeList: [],
				// 子类型列表
				childTypeList: [],

				// 表单对象
				fm: {
					fname: 'qjAdupFm',
					sb: {
						load: false,
						text: '修改',
						okBtnSty: this.C.subBtn
					},
					ps: {
						// 请假记录id
						id: '',
						// 请假类型
						mainType: {
							val: '',
							text: ''
						},
						// 请假子类型
						childType: {
							val: '',
							text: ''
						},
						// 请假人姓名
						name: '',
						// 请假开始日期 00:00
						stime: {
							date: '',
							time: ''
						},
						// 请假结束日期 23:59
						etime: {
							date: '',
							time: ''
						},
						// 请假事由
						reason: ''
					},
				}
			}
		},
		onLoad(ps) {
			const that = this;

			// 无论添加/修改都要获取主类型
			that.getQjTypeList();

			if (ps.id) { // 修改
				uni.setNavigationBarTitle({
					title: '修改请假信息'
				});

				this.getQjDetail(ps.id);
			} else { // 添加
				uni.setNavigationBarTitle({
					title: '添加请假信息'
				});

				// 修改提交按钮文本
				that.fm.sb.text = '添加';

				// 获取登录用户信息
				let luser = uni.getStorageSync(that.C.luser);
				if (luser) that.fm.ps.name = luser.realName;
			}
		},
		methods: {
			// 获取-请假详情
			getQjDetail(id) {
				let that = this,
					U = that.U;

				that.$u.api.getQjDetail({
					id: id
				}).then(res => {
					if (res.code == 1) {
						let o = res.data;
						that.obj = o;

						// 获取指定主类型的子类型列表
						// that.getQjTypeList();

						// 设置回填数据
						let p = {};
						// 请假记录id
						p.id = o.id,
							// 请假类型
							p.mainType = {
								val: o.leaveTypeId,
								text: o.leaveTypeName
							},

							// 请假人姓名
							p.name = o.leaveUser.split('-')[0],
							// 请假开始日期
							p.stime = {
								date: o.leaveStartTime.split(' ')[0],
								time: o.leaveStartTime.split(' ')[1] + ':00'
							},
							// 请假结束日期
							p.etime = {
								date: o.leaveEndTime.split(' ')[0],
								time: o.leaveEndTime.split(' ')[1] + ':00'
							},
							// 请假事由
							p.reason = o.leaveReason
						that.fm.ps = p;
					}
				});
			},
			/**
			 * 获取-指定主类型全部子类型列表
			 * @param {String} pid 主类型id（为0，则获取所有主类型列表）
			 */
			getQjTypeList() {
				let that = this,
					U = that.U;
				that.$u.api.getQjTypeList().then(res => {
					if (res.code == 1) {
						let list = res.data;
						// 说明pid为0，则默认设置子类型列表为第一个主类型全部子类型
						// 处理主类型数据为指定json格式
						let mainTypeList = list;
						mainTypeList.forEach(it => {
							that.mainTypeList.push({
								val: it.id,
								text: it.typeName
							});
						});
					}
				});
			},
			// 弹框列表选择
			mySeledMd(e) {
				// console.log('父级接收子组件数据', e);
				const that = this,
					ps = that.fm.ps;

				if (e.name == 'mainType') {
					ps[e.name] = e.obj;

					that.fm.ps.childType = {
						val: '',
						text: ''
					};
					// that.getQjTypeList();
				} else {
					ps[e.name] = e.obj;
				}
			},
			// 选择日期时间
			setDateTime(e) {
				// console.log('子组件的数据', e);

				let that = this,
					ps = that.fm.ps;

				// 回填日期时间数据
				ps[e.name] = e.obj;

				// console.log('参数对象', that.fm.ps);
			},
			// 验证表单
			valFm(ps) {
				let that = this,
					U = that.U,
					FV = that.FV,
					fg = true,
					p = {};

				// 修改对象id
				if (ps.id) p.id = ps.id;

				if (fg) {
					let mainTypeId = ps.mainType.val;
					if (!mainTypeId) {
						fg = U.qterror('请假类型不能为空', that);
					} else {
						p.mainTypeId = mainTypeId;
					}
				}



				if (fg) {
					let name = ps.name;
					if (!name) {
						fg = U.qterror('请假人姓名不能为空', that);
					} else {
						p.name = name;
					}
				}

				if (fg) {
					let stime = ps.stime.date;

					if (!stime) {
						fg = U.qterror('请假开始时间不能为空', that);
					} else {
						
						p.stime = `${ps.stime.date} ${ps.stime.time}`;
						
					}
				}

				if (fg) {
					let etime = ps.etime.date

					if (!etime) {
						fg = U.qterror('请假结束时间不能为空', that);
					} else {
						p.etime = `${ps.etime.date} ${ps.etime.time}`;
						
					}
				}

				if (fg) {
					let reason = ps.reason;
					if (!reason) {
						fg = U.qterror('请假事由不能为空', that);
					} else {
						p.reason = reason;
					}
				}

				return fg ? p : fg;
			},
			// 提交-请假修改-表单
			qjAdupSubmit() {
				let that = this,
					U = that.U,
					ps = U.scopy(that.fm.ps),
					sb = that.fm.sb;
				// console.log('处理提交参数前', ps);

				// 验证参数
				
				ps = that.valFm(ps);
				if(ps.stime.length< 13){
					return U.qterror('请选址开始时间', that);
				}
				if(ps.etime.length< 13){
					return U.qterror('请选址结束时间', that);
				}
				if (ps != false) {
					console.log('最终参数', ps);
					let data = {
						id: ps.id,
						leaveEndTime: ps.etime,
						leaveReason: ps.reason,
						leaveStartTime: ps.stime,
						leaveTypeId: ps.mainTypeId,
					}
					sb.load = true;
					that.$u.api.adupQj(data).then((res) => {
						if (res.code != 1) {
							sb.load = false;

							U.qterror(res.msg, that);
						} else {
							U.qtoast(that, {
								title: res.msg,
								type: 'success',
								duration: 1000,
								callback: function() {
									sb.load = false;

									// 调用父级onLoad中的刷新方法
									uni.$emit('refQjList');
									// 返回上一页
									uni.navigateBack({
										delta: 1
									});
								}
							});
						}
					}).catch(err => {
						sb.load = false;
					});
				}
			}
		}
	}
</script>

<style lang="less">
	.qj-adup {
		background-color: #efefef;
		height: 100vh;
	}
</style>